<!--多条件搜索-->
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">订单号</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <input type="text" nz-input formControlName="name" placeholder="Please input your name"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">订单状态</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <input type="text" nz-input formControlName="name" placeholder="Please input your name"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">订单状态</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <input type="text" nz-input formControlName="name" placeholder="Please input your name"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">订单状态</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <input type="text" nz-input formControlName="name" placeholder="Please input your name"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">订单状态</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <nz-select formControlName="name" nzShowSearch nzAllowClear nzPlaceHolder="Select a person" [(ngModel)]="selectedValue" >
            <nz-option nzLabel="Jack" nzValue="jack"></nz-option>
            <nz-option nzLabel="Lucy" nzValue="lucy"></nz-option>
            <nz-option nzLabel="Tom" nzValue="tom"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">开始时间</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="Please input your name">
          <app-my-date-picker (event)="setDate($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <div nz-col nzFlex="auto" class="search-area">
        <button nz-button nzType="primary" class="button_search">查询</button>
        <button nz-button nzType="primary">导出数据</button>
        <a class="collapse">
          更多查询
          <i nz-icon [nzType]="isCollapse ? 'down' : 'up'"></i>
        </a>
      </div>
    </div>

  </div>
</form>

<!--左按钮，右搜索-->
<!--一行显示按钮，一行显示搜索-->
<div class="toolbar margin-bottom btn-and-search" [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="24" nzSm="24" nzMd="14" nzLg="14" nzXl="18">
    <button class="margin-right" nz-button nzType="default">
      <i nz-icon nzType="plus" nzTheme="outline"></i><span *ngIf="!isMobile">添加</span>
    </button>
    <button class="margin-right" nz-button nzType="default" nzDanger>
      <i nz-icon nzType="delete" nzTheme="outline"></i><span *ngIf="!isMobile">删除</span>
    </button>
    <button class="margin-right" nz-button nzType="default">
      <i nz-icon nzType="edit" nzTheme="outline"></i><span *ngIf="!isMobile">修改</span>
    </button>
    <button class="margin-right" nz-button nzType="default">
      <i nz-icon nzType="redo" nzTheme="outline"></i><span *ngIf="!isMobile">刷新</span>
    </button>
  </div>

  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="24" nzSm="24" nzMd="10" nzLg="10" nzXl="6">
    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
      <input type="text" nz-input placeholder="搜索关健字"/>
    </nz-input-group>
    <ng-template #suffixIconButton>
      <button nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
    </ng-template>
  </div>

</div>


<!--一行显示按钮和搜索-->
<div class="toolbar margin-bottom btn-and-search" [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="4" nzSm="4" nzMd="14" nzLg="14" nzXl="18">
    <button nz-button nzType="primary">
      <i nz-icon nzType="plus" nzTheme="outline"></i>
      <span *ngIf="!isMobile">添加</span>
    </button>
  </div>

  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="20" nzSm="20" nzMd="10" nzLg="10" nzXl="6">
    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
      <input type="text" nz-input placeholder="角色名称"/>
    </nz-input-group>
    <ng-template #suffixIconButton>
      <button nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
    </ng-template>
  </div>

</div>
